<template>
    <Row id="login">
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
            <Col>
            <FormItem prop="user">
                <Input type="text" v-model="formInline.user" placeholder="用户名或邮箱">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            </Col>
            <Col>
            <FormItem prop="password">
                <Input type="password" v-model="formInline.password" placeholder="密码">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            </Col>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
            </FormItem>
        </Form>
    </Row>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        {required: true, message: '请输入用户名或邮箱', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {
                            type: 'string',
                            min: 6,
                            message: '最少得特么6个，谢谢',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                let _this = this
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http.post(
                            '/api/v1/login',
                            {
                                username:_this.formInline.user,
                                password:_this.formInline.password
                            }
                        )
                        .then(response => {
                            if (response.data.code === 0) {
                                // 本地存储jwt
                                localStorage.setItem('jwt', response.data.content.jwt);
                                //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
                                localStorage.setItem('admin', JSON.stringify(response.data.content.admin));
                                this.$Message.success({
                                    content: '登录成功',
                                    top: 50,
                                    duration: 2,
                                    onClose: function () {
                                        _this.$router.push({path: '/index'});
                                    }
                                });
                            } else {
                                this.$Message.error({
                                    content: response.data.message,
                                    duration: 2
                                });
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        this.$Message.error('出错！');
                    }
                })
            },
        }
    }
</script>

<style scoped>
    #login {
        text-align: center;
    }
</style>